<template>
	<view class="container">
		<view class="top">
			<view class="num" v-if="befrom == 'reg'"><text>6</text><text>/7</text></view>
			<view class="title">上传精美照片</view>
		</view>
		<view class="photoList">
			<u-upload
				:fileList="fileList"
				@afterRead="afterRead"
				@delete="deletePic"
				name="1"
				multiple
				:maxCount="9"
				:maxSize='1024*1024'
				:previewImage='true'
				></u-upload>
			<view class="submit" v-if="fileList.length < 1" style="background-color: #999999;">保存</view>
			<view v-if="fileList.length < 1" style="color: #d32900;width: 100%;text-align: center;">至少保留一张精美照片</view>
			<view class="submit" v-else @click="submitTap">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		user
	} from '@/api/user.js'
	import {
		checkUserInfo
	} from "@/common/utils/checkUserInfo.js"
	import cript from '@/common/utils/encript.js'
	import {uploadApi_qlw, upload_baseUrl} from '@/api/baseUrl.js'
	export default{
		data() {
			return {
				befrom: '',
				fileList: [],
				photoList: [],
			}
		},
		onLoad() {
			this.befrom = this.$Route.query.befrom
			this.photoList = JSON.parse(decodeURIComponent(this.$Route.query.content))
			console.log('photoList', this.photoList)
			this.photoList.forEach(elem=>{
				this.fileList.push({
					image_id: elem.id,
					url: elem.url,
				})
			})
		},
		methods:{
			async afterRead(event){
				console.log('afterRead', event)
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.publishTap(lists[i].thumb)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						image_id: result
					}))
					fileListLen++
				}
				console.log('filelist', this.fileList)
			},
			deletePic(event){
				console.log('deletePic', event)
				this.fileList.splice(event.index, 1)
			},
			publishTap(url){
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: uploadApi_qlw,
						filePath: url,
						name: 'file',
						method: 'POST',
						timeout: 30000,
						header: {
							"clientname": this.$store.state.clientname,
							'Authorization': 'token ' + this.$storage.getStorageDataSync(this.$store.state.token),
							'content-type': 'multipart/form-data' // 走网关的接口,一定要加上这个,要不支付宝小程序上传不成功
						},
						success: (uploadFileRes) => {
							var res = JSON.parse(uploadFileRes.data)
							console.log('uploadFileRes', JSON.parse(uploadFileRes.data))
							if (res.code == 10000) {
								// elem.id = res.data.image.id
								// elem.url = upload_baseUrl + res.data.image.fileName
								// that.photos.push(res.data.image.id)
								resolve(res.data.image.id)
							} else {
								uni.showToast({
									title: '上传失败',
									icon: 'none'
								})
							}
						}
					})
				})
			},
			submitTap(){
				var photos = []
				for(var item of this.fileList){
					photos.push(item.image_id)
				}
				user.updateUser({
					photos: photos
				}).then(res => {
					if(res.data.code == 10000){
						uni.navigateBack()
						uni.showToast({
							title: '保存成功',
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
	}
	.top {
		padding-top: 44px;
	
		.num {
			margin-top: 60rpx;
			text-align: center;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
	
			text:nth-of-type(1) {
				font-weight: bold;
				font-size: 36rpx;
			}
	
			text:nth-of-type(2) {
				color: #666666;
				font-size: 30rpx;
				margin-left: 8rpx;
			}
		}
	
		.title {
			font-size: 50rpx;
			font-weight: bold;
			margin-top: 40rpx;
			text-align: center;
		}
	
		.subTitle {
			color: #666666;
			margin-top: 30rpx;
			font-size: 50rpx;
			font-weight: bold;
			text-align: center;
		}
	}
	.photoList{
		margin-top: 60rpx;
		background-color: #FFFFFF;
		// width: 690rpx;
		padding: 20rpx;
		.photoTitle{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;
			
		}
		.detailInfoBtn{
			background-color: #cce0ff;
			color: #7893ff;
			text-align: center;
			width: 100rpx;
			height: 50rpx;
			line-height: 50rpx;
			border-radius: 25rpx;
			font-size: 26rpx;
		}
	}
	.submit{
		margin: 200rpx auto;
		margin-bottom: 20rpx;
		background-color: #7893ff;
		color: #FFFFFF;
		text-align: center;
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius:40rpx;
		font-size: 28rpx;
	}
</style>
